<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style>
        .triangle {
            /*这个盒子模式，不会被padding，margin撑开，且边框是内边框*/
            box-sizing: border-box;
            width: 20px;
            height: 20px;
            border-top: 150px solid coral;
            border-left: 150px solid orange;
            border-right: 150px solid cornflowerblue;
            border-bottom: 150px solid #9E9E9E;
        }
    </style>
</head>
<body>

<div class="triangle" style="background-color: coral;"></div>
<p id="mess"></p>
<script>

    window.onload = function(){

        var el = document.getElementsByClassName('triangle')[0];
        var p = document.getElementById('mess');


        // p.innerText += el.clientWidth + '==' + el.clientHeight;
        p.innerText = el.offsetWidth + '---' + el.offsetHeight;
    }

</script>
</body>
</html>